/**
 * LeftTitle.js 为簿记页面的左侧标题组件
 */
import React, { PureComponent } from 'react';
import { CaretDownOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Tooltip } from 'antd';
import { connect } from 'dva';
import { config1 } from '../config';
import '../../../../css/colorVar.less';
@Form.create()
@connect(({ shareOptionManageM, bookM }) => ({ shareOptionManageM, bookM }))
export default class LeftTitle extends PureComponent {
  state = {};
  componentDidMount() {}

  // 生成title
  generateTitle = () => {
    const {
      bookM: { titleOpen },
    } = this.props;
    let result = [];
    config1.forEach((ele, index) => {
      const info = ele.info;
      const arr = Object.getOwnPropertyNames(info);
      result.push(
        <div className='section' key={'section' + '_' + index}>
          <div className='secondHeader'>
            <div className='secondHeaderI'>
              <div className='left'>{ele.name}</div>
              <div className='right'>
                {ele.hasOpen ? (
                  <a onClick={() => this.pull(ele.type)}>
                    <CaretDownOutlined />
                  </a>
                ) : (
                  ''
                )}
              </div>
            </div>
          </div>

          <div style={{ height: titleOpen['isOpen' + ele.type] ? 'auto' : '0px', overflow: 'hidden' }}>
            {arr.map((item, idx) => {
              return (
                <p key={'titles' + item + '_' + idx} style={{ width: '100%', height: '39px', marginBottom: info[item].space, textAlign: 'right', lineHeight: '39px' }}>
                  {info[item].isRequired ? <span style={{ color: 'red' }}>*</span> : ''}
                  {info[item].name}
                  {info[item].key == 'koObservationDate' ? (
                    <Tooltip title={<div>请填写敲出观察日及相应敲出障碍价格率</div>}>
                      <QuestionCircleOutlined style={{ paddingLeft: '7px' }} />
                    </Tooltip>
                  ) : null}
                </p>
              );
            })}
          </div>
        </div>,
      );
    });
    return result;
  };
  // 添加簿记
  pull = (type) => {
    const {
      bookM: { titleOpen },
      dispatch,
    } = this.props;
    dispatch({
      type: 'bookM/changeOpenStatus',
      payload: {
        ['isOpen' + type]: !titleOpen['isOpen' + type],
      },
    });
  };
  render() {
    return (
      <div>
        {/* 留写按钮组件对应的间隔 */}
        <div style={{ height: '33px' }}></div>
        <div style={{ paddingRight: '30px', paddingTop: '20px' }}>{this.generateTitle()}</div>
      </div>
    );
  }
}
